<div class="dynamic-tabs" style='width:100%;height: 100%;'>
    <div class="button-item">
        <button pButton type="text" class="ui-button-info" icon="fa fa-download" label="下载"
            (click)="download()"></button>
        <button pButton type="text" class="ui-button-success" icon="fa fa-upload" label="上传"
            (click)="upload()"></button>
        <button pButton type="text" class="ui-button-danger" icon="fa fa-trash" label="删除" (click)="delete()"></button>
    </div>
    <div class="ui-g ui-g-12" style="height:100%;padding:0px;">
        <div class="ui-g ui-g-3 border-spe-right" style="height:100%;">
            <!-- 附件列表-->
            <p-tree [value]="mediaTree" selectionMode="single" [filter]="true" filterMode="strict"
                (onNodeSelect)="nodeSelect($event)" emptyMessage="无附件数据" [loading]="loading"
                [style]="{'padding':'0', 'height': '100%','width':'100%','border-style':'none'}">
            </p-tree>
        </div>
        <div class="ui-g ui-g-9" style="height:100%;padding:0;">
            <!-- Swiper -->
            <div class="swiper-container swiper-no-swiping swiper-container-horizontal">
                <div class="swiper-wrapper">
                    <div *ngFor="let media of medias" class="swiper-slide"
                        style="width: 1366px;display:flex;justify-content:center;align-items:center;">
                        <!--图片-->
                        <img *ngIf="media.type == 'PIC'" data-src="/media/api/storage/download?path={{media.src}}"
                            class="swiper-lazy">
                        <!--视屏-->
                        <video *ngIf="media.type == 'VIDEO'" id="video-{{media.id}}"
                            class="video-js vjs-big-play-centered" controls preload="true" fluid="true" height="50"
                            data-setup='{}'>
                        </video>
                        <!--word/PDF文档-->
                        <div *ngIf="media.type=='PDF' || media.type=='WORD'" style="width:100%;height:100%;">
                            <iframe id="pdfConcent-{{media.id}}" src="/assets/other/pdfjs/viewer.html"
                                style="width:100%;height:100%;"></iframe>
                        </div>
                        <!--音频-->
                        <audio *ngIf="media.type == 'AUDIO'" src="/media/api/storage/download?path={{media.src}}"
                            class="swiper-lazy">
                            您的浏览器不支持 audio 标签。
                        </audio>
                        <!--暂不支持的文件-->
                        <div *ngIf="media.type != 'PIC' && media.type != 'VIDEO' && media.type != 'PDF' 
                        && media.type != 'WORD'&& media.type != 'AUDIO'">
                            暂不支持的文件，请下载查阅
                        </div>
                        <!--加载图标-->
                        <div *ngIf="media.type != 'video'" class="swiper-lazy-preloader swiper-lazy-preloader-white">
                        </div>
                    </div>
                    <!--没有数据，显示默认图片 -->
                    <div *ngIf="medias.length == 0 && loading == false">
                        <img src="assets/images/404.gif" style="width :500px;margin-left: 50%;margin-top:30%;" />
                    </div>
                </div>
                <!-- Navigation -->
                <div class="swiper-button-next swiper-button-white" tabindex="0" role="button" aria-label="Next slide"
                    aria-disabled="false" (click)="pervNext(1)"></div>
                <div class="swiper-button-prev swiper-button-white swiper-button-disabled" tabindex="0" role="button"
                    aria-label="Previous slide" aria-disabled="true" (click)="pervNext(-1)"></div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
        </div>
    </div>
</div>